<template>
    <div id="rank">
        <div class="wrapper">
            <top-bar></top-bar>
            <top-header></top-header>
            <div class="main">
                <div class="main-box">
                    <div class="main-head">
                        <p>
                            <span class="lf-icon"></span>
                            <span class="head-title">优秀员工排行榜</span>
                            <span class="rg-icon"></span>
                        </p>
                    </div>
                    <div class="main-title">
                        <span class="title-item">头像</span>
                        <span class="title-item">姓名</span>
                        <span class="title-item">等级</span>
                        <span class="title-item">分值</span>
                        <span class="title-item">奖金</span>
                        <span class="title-item">排行</span>
                    </div>
                    <div class="main-content">
                        <p class="content-list" v-for="(item, index) in rankList" :key="index">
                            <span class="list-item item-avatar">
                                <div :style="{backgroundImage:'url(' +item.imageUrl+')'}"></div>
                            </span>
                            <span class="list-item item-name">
                                {{ item.staffName }}
                            </span>
                            <span class="list-item item-lv">
                                <div class="lv-icon" :class="getLv(item.levelName)"></div>
                            </span>
                            <span class="list-item item-score">
                                {{ item.totalScore }}
                            </span>
                            <span class="list-item item-lottery">
                                {{ item.bonus }}
                            </span>
                            <span class="list-item item-rank" v-if="item.rank > 3">
                                {{ item.rank }}
                            </span>
                            <span class="list-item item-rank" v-else>
                                <div class="rank-icon" :class="getIcon(item.rank)"></div>
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <bottom-tab class="bottom-bar"></bottom-tab>
    </div>
</template>

<script>
import topBar from '@/components/top-bar'
import topHead from '@/components/top-head'
import bottomTab from '@/components/bottom-tab'
let CONSTANT = require("../../constant/constant.js");
let common = require("../../common.js");

    export default {
        components: {
			'top-bar': topBar,
			'top-header': topHead,
			'bottom-tab': bottomTab
		},
        data() {
            return {
                loading: true,
                pageIndex:1,
                pageSize:10,
                rankList: [],
                pageCount: ''
            }
        },
        mounted() {
            this.getRank()
            var self = this
            $('#rank').scroll(function(){
                // console.log($("#projects"));
                var pheight = $("#rank")[0].scrollHeight;//获取页面高度
                var sheight = $("#rank")[0].offsetHeight;//获取滚动条高度，[0]是为了把jq对象转化为js对象
                var stop = $("#rank").scrollTop();//滚动条距离顶部的距离
                if( stop >= pheight - sheight){//当滚动条到顶部的距离等于滚动条高度减去窗口高度时
                    // queryMailList();
                    self.getMoreInform()
                    console.log("到底了！");
                }
            });
        },
        methods: {
            getLv(level) {
                switch (level) {
                    case 'A':
                    return 'lv-a'
                    break;
                    case 'B':
                    return 'lv-b'
                    break;
                    case 'C':
                    return 'lv-c'
                    break;
                    case 'D':
                    return 'lv-d'
                    break;
                    case 'S':
                    return 'lv-s'
                    break;
                }
            },
            getRank() {
                this.loading = true;
                let url = CONSTANT.URL.HERO.GETHERORANK;
                let data = {
                    pageIndex:this.pageIndex,
                    pageSize:this.pageSize
                };
                common.requestAjax(url,JSON.stringify(data),null,(res)=>{
                    this.loading = false;
                    let data = res.data.bussData;
                    this.rankList = this.rankList.concat(data);
                    this.pageCount = res.data.pageCount;
                    // console.log('所有数据', this.rankList);
                })
            },
            getIcon(rank) {
                switch (rank) {
                    case 1:
                    return 'rank-1'
                    break;
                    case 2:
                    return 'rank-2'
                    break;
                    case 3:
                    return 'rank-3'
                    break;
                }
            },
            getMoreInform() {
                console.log(this.pageCount);
                if (this.pageCount > this.pageIndex) {
                    this.pageIndex ++
                    this.getRank()
                }
            }
        }
    }
</script>

<style scoped>
#rank {
    position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
}
.wrapper {
    min-height: calc(100vh - 210px);
	padding-bottom: 310px;
    background-color: rgba(245,245,245,1);
}
.bottom-bar {
	position: relative;
    left: 0;
    bottom: 0;
    margin-top: -210px;
    clear: both;
}

.main {
    padding-top: 30px;
}
.main-box {
    width: 1200px;
    margin: 0 auto;
    background-color: #fff;
}
.main-head {
    width: 1200px;
    height: 130px;
    line-height: 130px;
    font-size:30px;
    text-align: center;
}
.main-head .lf-icon {
    display: inline-block;
    width: 20px;
    height: 25px;
    background: url(../../assets/lf_icon.png) no-repeat 100% 100%;
    background-size: cover;
    vertical-align: middle;
}
.main-head .rg-icon {
    display: inline-block;
    width: 20px;
    height: 25px;
    background: url(../../assets/rg_icon.png) no-repeat 100% 100%;
    background-size: cover;
    vertical-align: middle;
}
.main-head .head-title {
    padding: 0 20px;
    color:rgba(200,44,51,1);
    font-weight: 600;
}
.main-title {
    width:1200px;
    height:50px;
    background:rgba(195,24,31,1);
    display: flex;
}
.main-title .title-item {
    width: 240px;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
}

.content-list {
    display: flex;
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    background:rgba(250,250,250,1);
}
.content-list:nth-child(2n) {
    background-color: #fff;
}
.content-list .list-item {
    display: inline-block;
    width: 240px;
    height: 100px;
    text-align: center;
    font-weight: 600;
}
.list-item.item-avatar div {
    display: inline-block;
    width: 80px;
    height: 80px;
    vertical-align: middle;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}
.item-lv .lv-icon {
    display: inline-block;
    width: 70px;
    height: 70px;
    vertical-align: middle;
}
.item-rank .rank-icon {
    display: inline-block;
    width: 30px;
    height: 43px;
    vertical-align: middle;
}
.rank-1 {
    background: url(../../assets/rank_1.png) no-repeat 100% 100%;
    background-size: cover;
}
.rank-2 {
    background: url(../../assets/rank_2.png) no-repeat 100% 100%;
    background-size: cover;
}
.rank-3 {
    background: url(../../assets/rank_3.png) no-repeat 100% 100%;
    background-size: cover;
}
.lv-a {
    background: url(../../assets/lv_aaa.png) no-repeat 100% 100%;
    background-size: cover;
}
.lv-b {
    background: url(../../assets/lv_bbb.png) no-repeat 100% 100%;
    background-size: cover;
}
.lv-c {
    background: url(../../assets/lv_ccc.png) no-repeat 100% 100%;
    background-size: cover;
}
.lv-d {
    background: url(../../assets/lv_ddd.png) no-repeat 100% 100%;
    background-size: contain;
}
.lv-s {
    background: url(../../assets/lv_sss.png) no-repeat 100% 100%;
    background-size: 100% 100%;
}
</style>